<template>

     <div style="background-color: #f0f2f5; padding: 20px">
        <el-button type="primary" @click="router.push('/AddProduct')">新增</el-button>
        <el-button type="success" @click="UpdProduct()">修改</el-button>
        <el-button type="danger" @click="DelProduct()">删除</el-button>
        <el-button @click="role()">刷新</el-button>
    </div>
    <br/>
    <!-- 产品列表 -->
     <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="物品名称：">
            <el-input v-model="formInlines.PName"/>
        </el-form-item>
        <el-form-item label="产品编号：">
            <el-input v-model="formInlines.PNumber"/>
        </el-form-item>
        <el-form-item>
            <el-button @click="GetProduct()">查询</el-button>
        </el-form-item>
     </el-form>

     <el-row>
        <el-col :span="4">
            <p>产品分类选择</p>
            <el-tree style="max-width: 600px" :data="options" :props="defaultProps" @node-click="handleNodeClick" />
        </el-col>
        <el-col :span="18">
            <!-- 表格 -->
            <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="productId" label="序号" width="100" align="center"/>
                <el-table-column prop="pCharacteristic" label="标识" width="100" align="center"/>
                <el-table-column prop="pNumber" label="产品编号" align="center" width="140"/>
                <el-table-column prop="pName" label="物品名称" align="center"/>
                <el-table-column prop="ptClass" label="所属类别" align="center"/>
                <el-table-column prop="pSpec" label="规格型号" align="center"/>
                <el-table-column prop="pUnit" label="单位" align="center"/>
                <!-- <el-table-column prop=" "  >
                    <template v-slot="scope">
                        <a>关联详情</a>
                    </template>
                </el-table-column>
                <el-table-column prop=" " >
                    <template v-slot="scope">
                        <a>详情信息</a>
                    </template>
                </el-table-column> -->
            </el-table>
            <!-- 分页 -->
            <table>
                <tr>
                    <td>
                        <el-pagination v-model:current-page="formInline.PageIndex" v-model:page-size="formInline.PageSize" prev-text="上一页"
                            next-text="下一页" :page-sizes="[3, 5, 7]" :background="true" layout="total, slot,sizes"
                            :total="formInline.sumCount">
                            ，当前是{{ formInline.PageIndex }}/{{ formInline.pageLast }}页，每页{{ formInline.PageSize }}条
                        </el-pagination>
                    </td>
                    <td>
                        <el-pagination v-model:current-page="formInline.PageIndex" v-model:page-size="formInline.PageSize" prev-text="上一页"
                            next-text="下一页" :page-sizes="[3, 5, 7]" :background="true" layout=" slot, prev, pager, next"
                            :total="formInline.sumCount">
                            <el-button :disabled="formInline.PageIndex == 1" @click="formInline.PageIndex = 1">首页</el-button>
                        </el-pagination>
                    </td>
                    <td>
                        <el-pagination v-model:current-page="formInline.PageIndex" v-model:page-size="formInline.PageSize" prev-text="上一页"
                            next-text="下一页" :page-sizes="[3, 5, 7]" :background="true" layout=" slot, jumper"
                            :total="formInline.sumCount">
                            <el-button :disabled="formInline.PageIndex == formInline.sumCount"
                                @click="formInline.PageIndex = formInline.pageLast">尾页</el-button>
                        </el-pagination>
                    </td>
                </tr>
            </table>
        </el-col>
    </el-row>

     
</template>
    
<script setup lang='ts'>
import router from '@/router';
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive, ref, onMounted,watch } from 'vue'
import http from '../../http.js'
const formInline = reactive({
    PageIndex: 1,
    PageSize: 5,
    pageLast: 0,
    sumCount:0
    
})

const formInlines = reactive({
    PName: '',//产品名称
    PNumber: '',//产品编号
    Office_Id: '1',//公司id
    ProductTypeId:'',//产品类型id
})

onMounted(() => {
    GetProduct();//产品列表
    getProducts();//树形产品分类
})

//获取产品列表
const tableData=ref([])
const GetProduct = () => {
    axios.get(http.zblnb+'/erpcp/api/Product/ProductShow', {
        params: {
            PageIndex: formInline.PageIndex,
            PageSize: formInline.PageSize,
            PName: formInlines.PName,
            PNumber: formInlines.PNumber,
            Office_Id: formInlines.Office_Id,
            ProductTypeId:formInlines.ProductTypeId ||0 
        }
    })
    .then(res => {
        // console.log(res)
        tableData.value = res.data.data.list
        formInline.pageLast = res.data.data.pageLast
        formInline.sumCount = res.data.data.sumCount
    })
    .catch(err => {
        console.log(err)    
    })
}
//分页
watch(formInline,() => {
    GetProduct();
})
//多选框赋值
const Duo=ref([])
const handleSelectionChange = (val: any) => {
    Duo.value = val
    // console.log(Duo.value)
}
const options = ref([]);
//选择左侧产品分类
const defaultProps = {
    children: 'children',
    label: 'label',
}
const handleNodeClick = (data: any) => {
    // console.log(data.value);
    formInline.ProductTypeId = data.value;
}
//显示左侧产品分类树形显示
const getProducts = () => {
    axios.get(http.zblnb+"/erpcp/api/ProductType/ProductTypeSelect")
        .then(res => {
            options.value = res.data.data;
        })
        .catch(err => {
            console.log(err);
        })
}

//删除
const DelProduct = () => {
    ElMessageBox.confirm(
    '你真的要删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
    )
    .then(() => {
        let id = Duo.value.map(ele => ele.productId)
            if (id.length == 0) {
                ElMessage.error('请选择要删除的数据');
                return
            }
            // console.log(id);
            var dto = {
                id: id,
                delName:'11'
            }
        axios.post(http.zblnb+'/erpcp/api/Product/ProductDel',dto)
        .then(res => {
            if (res.data.data > 0) {
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                })
                GetProduct();
            }    
            else {
                ElMessage({
                    type: 'success',
                    message: '删除失败',
                })
                return
            }
        })
    })
    .catch(() => {
        ElMessage({
            type: 'info',
            message: '取消删除',
        })
    })
}

//刷新
const role = () => {
    setTimeout(() => {
        location.reload();
    },700)
}

//修改
const UpdProducts=ref({})
const UpdProduct = () => {
    if (Duo.value.length == 0) {
        ElMessage.error('请选择要修改的数据');
        return
    }
    if (Duo.value.length >1) {
        ElMessage.error('要修改的数据只能选择一条');
        return
    }
    UpdProducts.value = Duo.value[0]
    console.log(UpdProducts.value)
    router.push({ name: 'UpdProduct', query:  UpdProducts.value})
}


</script>
    
<style>
    
</style>